<template>
  <div class="app-container">
    <el-form :model="param" :inline="true" label-width="68px">
      <el-form-item style="width:180px">
        <div>提箱城市</div>
        <city-select :selectCity="param.boxStartCity" @cityId="startCityId" style="width: 100%;"></city-select>
      </el-form-item>
      <el-form-item style="width:180px">
        <div>还箱城市</div>
        <city-select :selectCity="param.boxBackCity" @cityId="backCityId" style="width: 100%;"></city-select>
      </el-form-item>
      <el-form-item style="width:180px">
        <div>箱型</div>
        <el-select v-model="param.boxType" style="width:100%" placeholder="选择箱型">
          <el-option v-for="item in param.boxTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item style="width:180px">
        <div>箱况</div>
        <el-select v-model="param.boxCondition" style="width:100%" placeholder="选择箱况">
          <el-option v-for="item in param.boxConditionOptions" :key="item.value" :label="item.label"
            :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item style="width:180px" prop="输入编号">
        <div>出租编号</div>
        <el-input v-model="param.boxReleaseNo" />
      </el-form-item>

      <el-form-item>
        <el-button :icon="Refresh" @click="handleReSet" style="margin-top: 30px">重置</el-button>
        <el-button :icon="Search" type="primary" @click="getTableData" style="margin-top: 30px">搜索</el-button>
      </el-form-item>
    </el-form>

    <!-- <Table   v-bind="table" @pageChange="onTablePageChange" @activInfo="activInfo">
    </Table> -->
    <el-row style="margin-top: 10px;min-height: 800px; ">
      <cardRentBox v-for="item in table.data" :cardData="item" @handleXiaDan="handleXiaDan(item)" style="float:left;">
      </cardRentBox>
    </el-row>
    <el-row style="margin-top: 10px; ">
      <el-pagination current-page="param.pageNum" page-size="param.pageSize" :pager-count="5"
        :page-sizes="[10, 20, 50, 100]" :total="table.config.total" background
        layout="total,sizes,prev, pager, next,jumper" @size-change="onHandleSizeChange"
        @current-change="onHandleCurrentChange" />
    </el-row>

  </div>
</template>

<script setup lang="ts">
import cardRentBox from '@/components/cardRentBox'
import { getTable } from '@/api/boxServer'
import { statusCount, publishPitch, downPitch, deletePitch } from '@/api/boxRent'
import citySelect from '@/components/citySelect'
import useUserStore from '@/store/modules/user'
import { computed, onMounted, reactive, ref } from 'vue';
import orderInfo from '@/store/modules/order'
import {
  Plus,
  Delete,
  Edit,
  Message,
  Download,
  Upload
} from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'

const userStore = useUserStore()

const param = reactive({
  loading: false,
  pageNum: 1,
  pageSize: 10,
  stateFilter: { 5: '出租中', 10: '仓库中', 15: '待发布' },
  stateColor: { 5: '#22A86D', 10: '#2158F3', 15: '#2158F3' },
  boxTypeOptions: [ // 5 - 40HQ   10 - 40GP  15 - 20HQ   20 - 20GP
    { value: '5', label: '40HQ', },
    { value: '10', label: '40GP', },
    { value: '15', label: '20HQ', },
    { value: '20', label: '20GP', },
  ],
  boxConditionOptions: [ //5-全新   10-次新  15-适货 20-混提(次新或者适货)
    { value: '15', label: '适货', },
    { value: '10', label: '次新', },
    { value: '20', label: '混提(次新或者适货)', },
    { value: '5', label: '全新', },
  ],
  beginTotalRentQty: '',
  endTotalRentQty: '',
  boxBackCity: '',
  boxStartCity: '',
  startCityOptions: [],
  backCityOptions: [],
  boxReleaseNo: '',
  typeList: []
});


const table = reactive({
  // 列表数据（必传）

  data: [],
  // 表头内容（必传，注意格式）
  header: [
    // { key: 'releaseRentId', colWidth: '220', title: 'releaseRentId', type: 'text', isCheck: true },
    { key: 'imgUrl', colWidth: '100', title: '集装箱展示', type: 'image', width: 80, height: 80, isCheck: true },
    { key: 'carryCityName', key2: 'carryCountryName', colWidth: '160', title: '提箱城市', type: 'twoRow', isCheck: true },
    { key: 'returnCityName', key2: 'returnCountryName', colWidth: '160', title: '还箱城市', type: 'twoRow', isCheck: true },
    { key: 'unitPrice', colWidth: '120', title: '租赁价', type: 'add', before: '￥', isCheck: true },
    { key: 'boxUsagePeriod', colWidth: '120', title: '箱使期', type: 'add', after: '天', isCheck: true },
    { key: 'inventory', colWidth: '120', title: '库存', type: 'text', isCheck: true },
    // { key: 'boxType', colWidth: '120', title: '箱型', type: 'filter', filter: param.boxTypeOptions, isCheck: true },
    // { key: 'boxCondition', colWidth: '120', title: '箱况', type: 'filter', filter: param.boxConditionOptions, isCheck: true },
    { key: 'boxType', colWidth: '120', title: '箱型', type: 'filter', filter: { 5: '40HQ', 10: '40GP', 15: '20HQ', 20: '20GP' }, isCheck: true },
    { key: 'boxCondition', colWidth: '120', title: '箱况', type: 'filter', filter: { 5: '全新', 10: '次新', 15: '适货', 20: '混提' }, isCheck: true },
    {
      key: 'operate',
      colWidth: '200',
      title: '',
      type: 'operate',
      isCheck: true,
      fixed: 'right',
      buttons: [
        {
          name: '下单',
          command: 'activInfo',
          isShow: (row: any) => {
            return row.companyId != param.companyId; // 1
          },
        },

      ],
    },
  ],
  // table配置项（必传）
  config: {
    isSelection: true,
    isList: false,
    isPagination: true, // 是否分页
    total: 0, // 分页总数
    loading: false
  }
});

// 城市id回写
const startCityId = (id: string) => {
  param.boxStartCity = id
}
const backCityId = (id: string) => {
  param.boxBackCity = id
}


async function getTableData() {
  let data = {
    pageNum: param.pageNum,
    pageSize: param.pageSize,
    carryCityId: param.boxStartCity,
    returnCityId: param.boxBackCity,
    releaseNo: param.boxReleaseNo,
    boxType: param.boxType,
    boxCondition: param.boxCondition,
    beginTotalRentQty: param.beginTotalRentQty - 0 || "",
    endTotalRentQty: param.endTotalRentQty - 0 || "",
  };
  table.config.loading = true;
  // 获取列表数据
  getTable(data).then((res: any) => {
    // console.log(JSON.parse(JSON.stringify(res.data.list)))
    table.data = JSON.parse(JSON.stringify(res.data.list));
    table.data.forEach((item: any) => {
      let mainFileList = JSON.parse(item.mainFileList);
      item.imgUrl = mainFileList.map((item: any) => {
        return item.url
      })[0];
    });
    table.config.total = res.data.total;
  });
  table.config.loading = false;
  //userId
  const user = await userStore.getUser()
  param.companyId = user.companyId
  // console.log(user)
  console.log(data)
}
//重置
function handleReSet() {
  param.boxType = null
  param.boxCondition = null
  param.boxStartCity = null
  param.boxBackCity = null
  param.boxReleaseNo = null
  getTableData()
}

//下单 
const router = useRouter();
const handleXiaDan = (row: any) => {
  orderInfo().setRowData(row)
  router.push('rentBoxInfo')
};

// 分页数量
const onHandleSizeChange = (val: number) => {
  param.pageSize = val;
  getTableData()
};
// 分页页码
const onHandleCurrentChange = (val: number) => {
  param.pageNum = val;
  getTableData()
};

onMounted(() => {
  getTableData()
})

</script>